<template>
	<div id="semesterManage">
		<v-head></v-head>
		<div class="list">
			<div class="list_head">
				<span class="head_name">学期列表</span>
				<el-button class="add" type="primary" @click="add()">添加学期</el-button>
			</div>
			<el-table :data="list">
				<el-table-column prop="semesterName" label="学期">
				</el-table-column>
				<el-table-column prop="startDate" label="学期开始时间">
				</el-table-column>
				<el-table-column prop="endDate" label="学期结束时间">
				</el-table-column>
				<el-table-column align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click="edit(scope.row)">编辑</el-button>
						<el-button size="small" type="text" @click="deleteSemester(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import vHead from "../../common/Header.vue";
	import vFooter from "../../common/Footer.vue";

	export default {
		data() {
			return {
				list: []
			};
		},
		mounted() {
			if (document.getElementsByClassName("head_img")[1]) {
				document.getElementsByClassName("head_img")[1].src = "../../../static/img/set_blue.png";
			}
			let logo_left = document.getElementsByClassName("logo-left")[0];
			let header = document.getElementById('header');
			let random = document.querySelector(".random");
			logo_left.style.background = "#fff";
			random.style.boxShadow = "0px 0px 0px 0px rgba(0, 0, 0, 0.5)";
			header.style.boxShadow = "0px 1px 4px 0px rgba(0, 0, 0, 0.5)";
			this.getSemesterList();
		},
		computed: mapState({ user: state => state.user }),
		components: {
			vHead,
			vFooter
		},
		methods: {
			add() {
				location.href = "/#/newSemester";
			},
			edit(row) {
				location.href = `/#/newSemester?sid=${row.sid}`;
			},
			deleteSemester(row) {
				this.$confirm("删除学期后将无法恢复,是否删除此学期?", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/campusadminapi/v1/semester/delete";
					this.$http({
						url,
						method: "POST",
						body: JSON.stringify({
							sid: parseInt(row.sid)
						})
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("删除成功");
							this.getSemesterList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => { });
			},
			//获取学期列表
			getSemesterList() {
				this.list = [];
				let url = this.$util.domain + "/campusadminapi/v1/tools/semesters";
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let semesterList = response.data.data;
						if (semesterList && semesterList.length > 0) {
							for (let i = 0; i < semesterList.length; i++) {
								let $index = i + 1;
								this.list.push({
									index: $index,
									sid: semesterList[i].sid,
									unids: semesterList[i].unids,
									semesterName: semesterList[i].semesterName,
									endDate: new Date(semesterList[i].endDate).format("yyyy/MM/dd"),
									startDate: new Date(semesterList[i].startDate).format("yyyy/MM/dd")
								});
							}
						}
					}
				});
			}
		}
	};
</script>

<style>
	#semesterManage {
		padding-bottom: 80px;
		height: calc(100% - 60px);
		background: #f7f7f8;
	}

	#semesterManage .list {
		width: 80%;
		margin-left: 10%;
		margin-top: 20px;
		height: calc(100% - 140px);
	}

	#semesterManage div.module:last-child {
		border-bottom: solid 4px #20a0ff;
	}

	#semesterManage div.module:last-child>.title {
		color: #20a0ff;
	}

	.add {
		position: absolute;
		right: 0px;
	}

	.search {
		margin: 20px;
	}

	#semesterManage .qizhiDate {
		width: 100%;
	}
</style>